<template>
	<PageWrapper title="动态表单示例">
		<div class="mb-4">
			<a-button @click="changeLabel3" class="mr-2"> 更改字段3label </a-button>
			<a-button @click="changeLabel34" class="mr-2"> 同时更改字段3,4label </a-button>
			<a-button @click="appendField" class="mr-2"> 往字段3后面插入字段10 </a-button>
			<a-button @click="deleteField" class="mr-2"> 删除字段11 </a-button>
		</div>
		<CollapseContainer title="动态表单示例,动态根据表单内其他值改变">
			<BasicForm @register="register" />
		</CollapseContainer>

		<CollapseContainer class="mt-5" title="componentProps动态改变">
			<BasicForm @register="register1" />
		</CollapseContainer>
	</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, CollapseContainer, PageWrapper } from '#/components';
import { useForm } from '#/hooks';
import type { FormSchema } from '#/types';

const schemas: FormSchema[] = [
	{
		field: 'field1',
		component: 'Input',
		label: '字段1',
		colProps: {
			span: 8,
		},
		show: ({ values }) => {
			return !!values.field5;
		},
	},
	{
		field: 'field2',
		component: 'Input',
		label: '字段2',
		colProps: {
			span: 8,
		},
		ifShow: ({ values }) => {
			return !!values.field6;
		},
	},
	{
		field: 'field3',
		component: 'DatePicker',
		label: '字段3',
		colProps: {
			span: 8,
		},
		dynamicDisabled: ({ values }) => {
			return !!values.field7;
		},
	},
	{
		field: 'field4',
		component: 'Select',
		label: '字段4',
		colProps: {
			span: 8,
		},
		dynamicRules: ({ values }) => {
			return values.field8 ? [{ required: true, message: '字段4必填' }] : [];
		},
		componentProps: {
			options: [
				{
					label: '选项1',
					value: '1',
					key: '1',
				},
				{
					label: '选项2',
					value: '2',
					key: '2',
				},
			],
		},
	},
	{
		field: 'field11',
		component: 'DatePicker',
		label: '字段11',
		colProps: {
			span: 8,
		},
	},
	{
		field: 'field5',
		component: 'Switch',
		label: '是否显示字段1(css控制)',
		colProps: {
			span: 8,
		},
		labelWidth: 200,
	},
	{
		field: 'field6',
		component: 'Switch',
		label: '是否显示字段2(dom控制)',
		colProps: {
			span: 8,
		},
		labelWidth: 200,
	},
	{
		field: 'field7',
		component: 'Switch',
		label: '是否禁用字段3',
		colProps: {
			span: 8,
		},
		labelWidth: 200,
	},
	{
		field: 'field8',
		component: 'Switch',
		label: '字段4是否必填',
		colProps: {
			span: 8,
		},
		labelWidth: 200,
	},
];

const schemas1: FormSchema[] = [
	{
		field: 'f1',
		component: 'Input',
		label: 'F1',
		colProps: {
			span: 12,
		},
		labelWidth: 200,
		componentProps: ({ formModel }) => {
			return {
				placeholder: '同步f2的值为f1',
				onChange: (e: ChangeEvent) => {
					formModel.f2 = e.target.value;
				},
			};
		},
	},
	{
		field: 'f2',
		component: 'Input',
		label: 'F2',
		colProps: {
			span: 12,
		},
		labelWidth: 200,
		componentProps: { disabled: true },
	},
	{
		field: 'f3',
		component: 'Input',
		label: 'F3',
		colProps: {
			span: 12,
		},
		labelWidth: 200,
		// @ts-ignore
		componentProps: ({ formActionType }) => {
			return {
				placeholder: '值改变时执行查询,查看控制台',
				onChange: async () => {
					const { validate } = formActionType;
					// tableAction只适用于在表格内开启表单的例子
					// const { reload } = tableAction;
					const res = await validate();
					console.log(res);
				},
			};
		},
	},
];

export default defineComponent({
	components: { BasicForm, CollapseContainer, PageWrapper },
	setup() {
		const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled }] = useForm({
			labelWidth: 120,
			schemas,
			actionColOptions: {
				span: 24,
			},
		});
		const [register1] = useForm({
			labelWidth: 120,
			schemas: schemas1,
			actionColOptions: {
				span: 24,
			},
		});
		function changeLabel3() {
			updateSchema({
				field: 'field3',
				label: '字段3 New',
			});
		}
		function changeLabel34() {
			updateSchema([
				{
					field: 'field3',
					label: '字段3 New++',
				},
				{
					field: 'field4',
					label: '字段4 New++',
				},
			]);
		}

		function appendField() {
			appendSchemaByField(
				{
					field: 'field10',
					label: '字段10',
					component: 'Input',
					colProps: {
						span: 8,
					},
				},
				'field3',
			);
		}
		function deleteField() {
			removeSchemaByFiled('field11');
		}
		return {
			register,
			register1,
			schemas,
			setProps,
			changeLabel3,
			changeLabel34,
			appendField,
			deleteField,
		};
	},
});
</script>
